<template>
    <div style="background: white;padding:20px">

        <mai-mao-tabs :font-size=11 :width=140 :tabs="orderTab" :active-tab="activeTab" :background-color="tabBackColor"
                      @activeTabChange="orderTabChange"></mai-mao-tabs>
        <div>
            <div>
                <a-input-search style="width: 500px" placeholder="商品编号" v-model="searchData.goodsId" size="default"
                                @search="loadGroup">

                </a-input-search>
                <br/>
                <a-input-search style="width: 500px;margin-top: 20px" placeholder="订单编号" v-model="searchData.orderId"
                                size="default"
                                @search="loadGroup">

                </a-input-search>
                <a-button type="link" @click="simpleSearch=!simpleSearch">{{simpleSearch?'更多搜索条件':'精简搜索条件'}}</a-button>
                <a-button type="danger" @click="exportOrder">导出当前订单</a-button>
                <!--<a-select>
                   <a-select-option :value="8">8条</a-select-option>
                   <a-select-option :value="50">50条</a-select-option>
                   <a-select-option :value="100">100条</a-select-option>
                   <a-select-option :value="500">500条</a-select-option>
                   <a-select-option :value="-1">全部</a-select-option>
                </a-select>-->
                <span style="font-size: 11px;color: red">订单导出数据有延迟，如与当前数据不同步，请等待5分钟...</span>
            </div>
            <a-form-model v-show="!simpleSearch" layout="inline">

                <a-row>

                    <a-col :span="8">
                        <a-form-model-item label="商品名：">
                            <a-input v-model="searchData.title"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="买家昵称：">
                            <a-input v-model="searchData.buyerName"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="评价状态：">
                            <a-select v-model="searchData.commentType" defaultValue="-1" style="width: 190px"
                                      @change="loadGroup">
                                <a-select-option value=null>全部</a-select-option>
                                <a-select-option value="0">对方未评价</a-select-option>
                                <a-select-option value="1">对方已评价</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>

                </a-row>
                <a-row>
                    <a-col :span="16">
                        <a-form-model-item label="成交时间：">
                            <a-date-picker
                                    v-model="searchData.fromTime"
                                    show-time
                                    :disabled-date="disabledStartDate"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    placeholder="请选择时间范围起始"
                                    @change="fromTimeChange"
                            />
                            -
                            <a-date-picker
                                    v-model="searchData.toTime"
                                    show-time
                                    :disabled-date="disabledEndDate"
                                    @change="toTimeChange"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    placeholder="请选择时间范围起始"
                            />
                        </a-form-model-item>
                    </a-col>


                </a-row>
                <a-button style="color: #E2231A" @click="loadGroup">搜索</a-button>


            </a-form-model>
        </div>
        <div style="margin-top: 20px">
            <div class="table-header">
                <a-row>
                    <a-col :span="3" offset="3">宝贝</a-col>
                    <a-col :span="2" offset="2">单价</a-col>
                    <a-col :span="2" offset="1">数量</a-col>
                    <a-col :span="2" offset="0">买家</a-col>
                    <a-col :span="3" offset="1">实付款</a-col>
                    <a-col :span="3">交易状态</a-col>
                    <a-col :span="2">操作</a-col>
                </a-row>
            </div>
            <a-card style="padding: 0;margin-top: 0px" hoverable v-for="orderShop in orderData" class="order-card">

                <div style="padding-bottom: 15px">
                    <span class="order-shop-top" style="font-weight: 700">{{orderShop.createTime}}</span>
                    <span class="order-shop-top"> 订单号：{{orderShop.orderId}}</span>
                </div>

                <div v-for="(goods,goodsIndex) in orderShop.orderGoodsList" style="width: 100%" class="order-item">
                    <a-row>
                        <a-col :span="2">
                            <img style="width: 80px;height: 80px"
                                 :src="goods.picture"/>
                        </a-col>

                        <a-col :span="5">
                            <div class="goods-title">
                                <span @click="toGoodsDetail(goods)"> {{goods.title}} [交易快照]</span>
                            </div>

                            <div class="goods-spec">
                                {{goods.specDisplayName}}
                            </div>
                        </a-col>
                        <a-col :span="2" offset="1">
                            ￥ {{goods.price}}
                        </a-col>
                        <a-col :span="1" offset="1">x{{goods.num}}</a-col>
                        <a-col :span="2" offset="1"><span style="font-size: 12px">{{orderShop.buyerName}}</span></a-col>
                        <a-col :span="2" offset="1" style="text-align: center">
                            <div>
                                <span style="text-decoration: line-through;color: #afafaf">￥{{orderShop.totalPrice}}</span>
                            </div>
                            <span style="font-weight: 800">￥{{orderShop.actualPrice}}</span>
                            <div>
                                <span style="font-size: 12px;color: #6C6C6C">含运费：(￥{{orderShop.deliveryFee}})</span>
                            </div>
                        </a-col>
                        <a-col :span="3" offset="1">
                            <a-tag color="blue" style="margin-bottom: 10px">
                                {{orderShop.status===1?'待付款':orderShop.status===2?'买家已付款':orderShop.status===5?'交易成功':orderShop.status===6?'交易取消':'交易中'}}
                            </a-tag>
                            <br/>
                            <a-tag color="green">
                                {{goods.shippedStatus===1?'已发货':goods.shippedStatus===0?'未发货':'交易异常'}}
                            </a-tag>
                            <div v-if="orderShop.status===5">
                                <!--                                {{// iorderShop.orderGoodsList&&orderShop.orderGoodsList.lengthzorderShop.comment===true?'已评论':'未评论'}}-->
                            </div>
                        </a-col>
                        <a-col :span="2">
                            <div>
                                <a-button style="font-size: 14px" type="link"
                                          v-if="goods.shippedStatus===0&&(orderShop&&orderShop.status===2)"
                                          @click="deliverGoods(goods)">发货
                                </a-button>


                            </div>
                        </a-col>
                    </a-row>
                    <a-divider v-if="goodsIndex!=orderShop.orderGoodsList.length-1"></a-divider>
                </div>

            </a-card>
            <a-pagination style="float:right;" showQuickJumper v-model="pageMap.page" :page-size="pageMap.size"
                          :total="pageMap.total" @change="pageChange"/>

        </div>


    </div>
</template>

<script>
    import XEUtils from 'xe-utils'
    import {isArr} from "../../../utils/arrayUtil"
    import {getLocalStorageJson, setLocalStorageJson} from "../../../utils/auth";
    import orderApi from "../../../api/order/orderApi";
    import moment from "moment-timezone";
    import MaiMaoTabs from "../../../components/common/MaiMaoTabs";
    import {getUrlParam} from "../../../utils/urlUtils";

    export default {
        name: "cellOrderCenter",
        components: {MaiMaoTabs},
        inject: ["reload"],
        data() {
            return {
                orderData: [],
                pageMap: {
                    page: 1,
                    size: 20,
                    total: 0
                },
                searchData: {
                    orderId: "",
                    goodsId: "",
                    title: "",
                    buyerName: "",
                    fromTime: null,
                    toTime: null,
                    commentType: null,
                    status: null,
                    shopName: "",
                    shopOrder: true
                },
                orderTab: [{
                    key: "threeIn",
                    text: "近三个月订单"
                },
                    {
                        key: "1",
                        text: "等待买家付款"
                    },
                    {
                        key: "2",
                        text: "等待发货"
                    },
                    {
                        key: "4",
                        text: "已发货"
                    },
                    {
                        key: "5",
                        text: "成功的订单"
                    },
                    {
                        key: "6",
                        text: "关闭的订单"
                    },
                    {
                        key: "threeBefore",
                        text: "三个月前的订单"
                    }
                ],
                activeTab: "",
                simpleSearch: true,
                tabBackColor: "#1A90FF"

            }
        },
        created() {
            let urlParam = getUrlParam();
            if (urlParam && urlParam.orderId && urlParam.orderId > 0) {

                this.searchData.orderId = urlParam.orderId
            }
            this.loadGroup()
        },
        methods: {
            orderTabChange(key) {
                console.log(key)
                this.activeTab = key
                if (key === 'threeIn') {
                    //近三个月
                    this.searchData.fromTime = moment().add(-3, 'months').format("YYYY-MM-DD HH:mm:ss")
                    this.searchData.toTime = null;
                    this.searchData.status = null
                } else if (key === 'threeBefore') {
                    this.searchData.fromTime = null;
                    this.searchData.status = null
                    this.searchData.toTime = moment().add(-3, 'months').format("YYYY-MM-DD HH:mm:ss")
                } else {
                    this.searchData.fromTime = null;
                    this.searchData.toTime = null;
                    this.searchData.status = key;
                }
                this.loadGroup()
            },
            moment,

            disabledStartDate(startValue) {
                const endValue = this.searchData.toTime;
                if (!startValue || !endValue) {
                    return false;
                }
                return startValue.valueOf() > endValue.valueOf();
            },
            disabledEndDate(endValue) {
                const startValue = this.searchData.fromTime;
                if (!endValue || !startValue) {
                    return false;
                }
                return startValue.valueOf() >= endValue.valueOf();
            },
            fromTimeChange(value) {
                this.searchData.fromTime = value.format("YYYY-MM-DD HH:mm:ss")
                this.loadGroup()
            },
            toTimeChange(value) {
                this.searchData.toTime = value.format("YYYY-MM-DD HH:mm:ss")
                this.loadGroup()
            },
            exportOrder() {
                this.$message.success("正在导出")

                orderApi.exportOrder(this.searchData, this.pageMap.page, this.pageMap.size).then(resp => {

                    let contentDis = resp.headers['content-disposition'];
                    let fileName = contentDis.split(";")[1].split("=")[1].split(".")[0]
                    this.$fileDownload(resp.data, fileName + ".xlsx")
                })
            },
            loadGroup() {
                orderApi.queryShopOrderList(this.pageMap.page, this.pageMap.size, this.searchData).then(resp => {
                    if (resp.data.flag) {
                        console.log(resp.data.data)
                        this.orderData = resp.data.data.rows;
                        this.pageMap.total = resp.data.data.total

                    }
                })
            },
            pageChange(current) {
                this.pageMap.page = current;
                this.loadGroup()
            },
            /**
             * 删除订单
             * @param orderShop
             */
            deleteOrder(orderShop) {
                console.log(orderShop)
                let status = orderShop.status;
                if (status && (status === 1 || status === 5 || status === 6)) {
                    let that = this;
                    this.$confirm({
                        title: '确定删除该订单吗？',
                        content: '删除订单后可在回收站找到，或进行永久删除',
                        onOk() {
                            orderApi.deleteOrder(orderShop.id).then(Resp => {
                                if (Resp.data.flag) {
                                    that.loadGroup();
                                }
                            })
                        },
                        onCancel() {
                        },
                    });
                } else {
                    this.$message.warning("订单进行中，不可删除");
                }

            },
            toGoodsDetail(goods) {
                console.log(goods)
                let selectedParam = JSON.parse(goods.spec)
                let indexesArr = Object.values(selectedParam)
                let indexes = ""
                indexesArr.forEach(item => {
                    indexes += item + "_"
                })
                console.log(goods)
                let uri = `/goodDetail?goodsInfo=${encodeURI(JSON.stringify({
                    id: goods.goodsId,
                    index: indexes.substring(0, indexes.length - 1)
                }))}`
                this.$router.push(encodeURI(uri))

            },
            buyAgain() {
                this.$router.push("/cart_index")
            },
            deliverGoods(goods) {
                console.log(goods)
                orderApi.delivery(goods.id, goods.orderShopId, goods.orderId).then(resp => {
                    if (resp.data.flag) {
                        this.$message.success(resp.data.message)
                        this.reload()
                    }
                })
            }


        }
    }
</script>

<style scoped>
    .order-shop-top {
        margin-right: 20px;
        font-size: 12px;
    }

    .table-header {
        background: #F9D2D3;
        padding: 15px 5px;
        background: #F5F5F5;
    }

    .order-card {
        border: 1px solid #ececec;
        padding: 5px 5px 0 5px;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .order-item {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .goods-title {
        line-height: 16px;
        color: #3c3c3c;
        font-size: 12px;
        margin-bottom: 5px;
    }

    .goods-spec {
        font-size: 12px;
        color: #9e9e9e;
        margin-top: 10px;
    }

    .shopName {
        color: #3C3C3C;
    }

    .shopName :hover {
        color: red;
    }

    .delete-btn {
        font-size: 16px;
    }

    .delete-btn :hover {
        color: #E2231A;
    }
</style>
<style>


</style>
